<template>
  <div class="out">
    <zHeader pageTitle="看房预约"></zHeader>
    
    <div class="pageOut">
      <van-form>
        <van-cell-group inset>
          <van-field
            v-model="yuyueData.username"
            name="客户姓名"
            label="客户姓名"
            placeholder="请输入真实姓名"
          />
          <van-field name="radio" label="客户性别">
            <template #input>
              <van-radio-group v-model="yuyueData.gender" direction="horizontal">
                <van-radio :name="pageConstant.fangKeXingBie[0].value">男</van-radio>
                <van-radio :name="pageConstant.fangKeXingBie[1].value">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="yuyueData.phone"
            type="tel"
            name="手机号码"
            label="手机号码"
            placeholder="请输入手机号码"
          />
          <van-field
            v-model="yuyueData.yuyueDate"
            is-link
            readonly
            name="datePicker"
            label="预约日期"
            placeholder="请选择预约日期"
            @click="yuyueDateShowPicker = true"
          />
          <van-popup v-model:show="yuyueDateShowPicker" destroy-on-close position="bottom">
            <van-date-picker
              :model-value="yuyueDatePickerValue"
              @confirm="yuyueDateOnConfirm"
              @cancel="yuyueDateShowPicker = false"
              :min-date="minDate"
            />
          </van-popup>
          <van-field
            v-model="yuyueData.yuyueTime"
            is-link
            readonly
            name="timePicker"
            label="预约时间"
            placeholder="请选择预约时间"
            @click="yuyueTimeShowPicker = true"
          />
          <van-popup v-model:show="yuyueTimeShowPicker" destroy-on-close position="bottom">
            <van-time-picker
              v-model="yuyueTimePickerValue"
              :columns-type="yuyueTimeColumnsType"
              @confirm="yuyueTimeOnConfirm"
              @cancel="yuyueTimeShowPicker = false"
            />
          </van-popup>
          <div class="areaSelect">
            <div class="topText">选择预约人数</div>
            <div class="bottomSelectBtnArea">
              <div class="selectBtn" v-for="(item, index) in yuyueNumberType" :key="index" :class="yuyueSelectedIndex == index ? 'selected' : ''" @click="tapSelectBtnHandler(index)">{{ item }}</div>
            </div>
          </div>
          <van-field
            v-if="yuyueData.yuyueNumber == '其他'"
            v-model="yuyueData.yuyueNumberInput"
            type="digit"
            name="预约人数"
            label="预约人数"
            placeholder="请输入预约人数"
          />
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button block color="rgb(24, 126, 255)" type="primary" @click="submitHandler">
            立即预约
          </van-button>
        </div>
      </van-form>
    </div>
    
    <van-overlay :show="ifShowYuyueSuccess">
      <div class="yuyueSuccessCardOut">
        <section class="yuyueSuccessCard">
          <div class="successIconArea">
            <div class="iconOut">
              <svg t="1739501169701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13060" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">
                <path d="M297.021 505.836c-18.73-18.716-49.12-18.716-67.847 0-18.73 18.72-18.73 49.05 0 67.766l197.387 197.1c9.37 9.374 21.656 14.06 33.941 14.06 12.249 0 24.546-4.686 33.906-14.044L945.963 319.78c18.709-18.721 18.709-49.063 0-67.757-18.746-18.721-49.122-18.721-67.868 0L460.502 669.112 297.021 505.836z" p-id="13061" fill="#22c55e"></path>
                <path d="M1020.137 458.797c-2.068-20.037-20.041-34.622-40.09-32.54-20.069 2.067-34.66 19.985-32.582 40.038 1.56 15.023 2.34 30.361 2.34 45.6 0 241.401-196.652 437.793-438.371 437.793-241.73 0-438.375-196.392-438.375-437.792 0-241.411 196.644-437.797 438.375-437.797 86.233 0 169.678 24.977 241.297 72.238 16.84 11.107 39.497 6.462 50.619-10.341 11.105-16.813 6.48-39.445-10.355-50.552C709.407 30.29 612.027 1.138 511.434 1.138 229.429 1.138 0 230.268 0 511.896c0 281.627 229.429 510.753 511.434 510.753 282 0 511.428-229.126 511.428-510.753 0-17.738-0.91-35.598-2.725-53.1z" p-id="13062" fill="#22c55e"></path>
              </svg>
            </div>
          </div>
          <div class="title">预约成功</div>
          <div class="content">
            您的预约已成功确认。我们期待您的到来！
          </div>
        </section>
      </div>
    </van-overlay>
  </div>
</template>

<script setup>
import { pageConstant } from '@/config/contant.js'
import { postKanFangYuYueCreate, postKanFangYuYueYouKeCreate } from '@/api/kanFangyuyue/index.js'
import { useRouter } from 'vue-router'
const router = useRouter()
import { getUserId, getSelectedXiaoQuId, jugeIfIsUser } from '@/config/config.js'

if (!getSelectedXiaoQuId()) {
  showDialog({
    message: '暂无小区数据，请先配置小区',
  }).then(() => {
    router.back()
  })
}


const yuyueData = ref({
  username: '',
  gender: '',
  phone: '',
  yuyueDate: '',
  yuyueTime: '',
  yuyueNumber: '',
  yuyueNumberInput: ''
})
const minDate = ref(new Date())
const yuyueDateShowPicker = ref(false);
const yuyueDatePickerValue = ref([]);
const yuyueDateOnConfirm = ({ selectedValues }) => {
  yuyueData.value.yuyueDate = selectedValues.join('-');
  yuyueDatePickerValue.value = selectedValues;
  yuyueDateShowPicker.value = false;
};

const yuyueTimeShowPicker = ref(false);
const yuyueTimePickerValue = ref(['00', '00']);
const yuyueTimeColumnsType = ref(['hour', 'minute']);
const yuyueTimeOnConfirm = () => {
  yuyueData.value.yuyueTime = yuyueTimePickerValue.value.join(':');
  // yuyueTimePickerValue.value = selectedValues;
  yuyueTimeShowPicker.value = false;
  console.log(yuyueData.value.yuyueTime)
};

const yuyueNumberType = ref(['1人', '2人', '3人', '其他'])
const yuyueSelectedIndex = ref(-1)
const tapSelectBtnHandler = (index) => {
  if (yuyueSelectedIndex.value == index) {
    yuyueSelectedIndex.value = -1
    yuyueData.value.yuyueNumber = ''
  } else {
    yuyueSelectedIndex.value = index
    yuyueData.value.yuyueNumber = yuyueNumberType.value[yuyueSelectedIndex.value]
  }
}

const ifShowYuyueSuccess = ref(false)
const submitHandler = () => {
  if (!yuyueData.value.username || yuyueData.value.username.length == 0) {
    showToast('请输入真实姓名');

    return 
  }

  if (!yuyueData.value.gender || yuyueData.value.gender.length == 0) {
    showToast('请选择性别');

    return 
  }

  if (!yuyueData.value.phone || yuyueData.value.phone.length == 0) {
    showToast('请输入手机号码');

    return 
  }

  if (!/^1[3-9]\d{9}$/.test(yuyueData.value.phone)) {
    showToast('请输入有效的手机号码');

    return 
  }

  if (!yuyueData.value.yuyueDate || yuyueData.value.yuyueDate.length == 0) {
    showToast('请选择预约日期');

    return 
  }

  if (!yuyueData.value.yuyueTime || yuyueData.value.yuyueTime.length == 0) {
    showToast('请选择预约时间');

    return 
  }

  if (!yuyueData.value.yuyueNumber || yuyueData.value.yuyueNumber.length == 0) {
    showToast('请选择预约人数');

    return 
  }

  let param = {
    xiaoQuId: getSelectedXiaoQuId(),
    xingMing: yuyueData.value.username,
    xingBie: yuyueData.value.gender,
    shouJiHao: yuyueData.value.phone,
    yuYueDate: yuyueData.value.yuyueDate,
    yuYueTime: yuyueData.value.yuyueTime,
    yuYueNum: 0,
    userId: getUserId()
  }
  if (yuyueData.value.yuyueNumber == '其他') {
    param.yuYueNum = yuyueData.value.yuyueNumberInput
  } else {
    param.yuYueNum = yuyueData.value.yuyueNumber.slice(0, 1)
  }

  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  });

  let apiData = null
  if (jugeIfIsUser()) {
    apiData = postKanFangYuYueCreate
  } else {
    apiData = postKanFangYuYueYouKeCreate
  }

  apiData(param).then(res => {
    // 关闭加载中提示
    closeToast();

    if (res.data.code == pageConstant.okCode) {
      ifShowYuyueSuccess.value = true
      setTimeout(() => {
        router.back()
      }, 3000)
    } else {
      showToast(res.data.msg);
    }
  })
  .catch((err) => {
    console.log(err)
  })
}
</script>

<style lang="scss" scoped>
.out {
  min-height: 100dvh;
  width: 100vw;
  background-color: rgb(241, 241, 241);

  .pageOut {
    padding: 15px 4px;
    width: 100%;
    box-sizing: border-box;

    ::v-deep .van-cell {
      font-size: 15px;
    }
    ::v-deep .van-field {
      padding-top: 15px;
      padding-bottom: 15px;
    }

    .areaSelect {
      padding: 19px 16px 15px;
      font-size: 15px;

      .bottomSelectBtnArea {
        display: flex;
        margin-top: 10px;

        .selectBtn {
          width: 70px;
          height: 30px;
          border-radius: 5px;
          background-color: rgb(242, 242, 247);
          line-height: 30px;
          text-align: center;
          margin-right: 10px;
        }

        .selected {
          background-color: rgb(24, 126, 255);
          color: #fff;
        }
      }
    }

    ::v-deep .van-button__content {
      font-size: 16px;
    }
  }

  .yuyueSuccessCardOut {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    padding: 0 20px;
    height: 100%;
    
    .yuyueSuccessCard {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      padding: 20px;
      padding-bottom: 30px;
      background-color: #fff;
      border-radius: 5px;

      .successIconArea {
        padding: 20px;
        padding-top: 0;
        height: 80px;
        width: 100px;
        box-sizing: border-box;

        .iconOut {
          padding: 18px;
          height: 60px;
          width: 60px;
          box-sizing: border-box;
          background-color: rgb(220, 252, 231);
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
        }
      }
      .title {
        font-weight: bold;
        font-size: 20px;
      }
      .content {
        margin-top: 15px;
        font-size: 14px;
      }
    }
  }
}
</style>